// 表格的增删改查，就是基础的页面逻辑
// 类似于自定义的hooks
import { AddDeptModel, DeptModel } from '@/api/dept/DeptModel'
import { EditType } from '@/type/BaseEnum'
import { ref } from 'vue'
// 注册全局的方法的使用
import useInstance from '@/hooks/useInstance'
import { addDeptApi, editDeptApi, deleteDeptApi } from '@/api/dept/dept'
import { Result, StatusCode } from '@/http/request'

export default function useDept (getDeptList: any) {
  // 这里定义了组件的ref属性
  // 这里的使用场景是父组件，addDeptRef是子组件，子组件携带了一个show方法，用来展示自己
  // 然后还携带了一个可选参数，就是row，选中的行，目的是为了传递个子组件
  const addDeptRef = ref<{ show: (type: string, row?: DeptModel) => void }>()
  // 直接使用ref不传递show方法也不行，会报错
  // const addDeptRef = ref(null)
  // 下面这种方式在打包的时候会报错
  // 或者可以采用getCurrentInstance这种方式来获取组件
  // const { proxy } = getCurrentInstance() as any
  // proxy.$refs.loginFormRef.validate(async (valid: boolean) => {
  // const addDeptRef = ref<InstanceType<typeof AddAndEdit>>()

  // vue3中关于全局挂载属性的方法做了修改，不再使用原来的方式，改为新的方式挂载
  // 但是这种新的挂载方式会挂载到app.config.globalProperties上，所以使用的时候需要重新引入一下
  // 引入就需要封装一个方法，可以便捷一点，就是/hooks/useInstance这个方法，从全局中把global给解构出来
  // 这个是直接往实例对象上挂载新的属性的写法，取代了原有的vue.prototype.$myconfirm=...这种写法
  // app.config.globalProperties.$resetForm = resetForm
  const { global } = useInstance()
  // console.log(global);

  // 搜索
  const searchBtn = () => {
    getDeptList()
  }
  // 新增
  const addBtn = () => {
    // vue3中父组件调用子组件的方法，先获取子组件的ref,然后调用子组件的方法show
    // 这个show方法还需要子组件暴露给父组件
    addDeptRef.value?.show(EditType.ADD)
  }
  // 编辑
  const editBtn = (row: DeptModel) => {
    addDeptRef.value?.show(EditType.EDIT, row)
  }
  // 删除
  const deleteBtn = async (id: number) => {
    let parm = {
      id: id
    }
    let confirm = await global.$myconfirm('确定删除该数据吗?')
    // console.log(confirm);
    if (confirm) {
      // 执行删除操作
      console.log(parm)

      let res = await deleteDeptApi(parm)
      if (res && res.code == StatusCode.Success) {
        //信息提示
        global.$message({ message: res.msg, type: 'success' })
        //刷新表格
        getDeptList()
      }
    }
    // console.log(global);
  }
  // 保存 这里在触发保存事件的时候，已经把需要的值传递过来了
  const saveBtn = async (model: AddDeptModel) => {
    console.log('保存')
    console.log(model)
    // 提价表单
    let res: Result
    if (model.type == EditType.ADD) {
      // 新增
      res = await addDeptApi(model)
    } else {
      // 编辑
      res = await editDeptApi(model)
    }
    console.log(res)

    if (res && res.code == StatusCode.Success) {
      //信息提示
      global.$message({ message: res.msg, type: 'success' })
      //刷新表格
      getDeptList()
    }
  }

  return {
    searchBtn,
    addBtn,
    editBtn,
    deleteBtn,
    saveBtn,
    addDeptRef
  }
}
